<template>
  <div id="login">
    <canvas id="fizz"></canvas>
    <div class="userInfo">
          <div class="title">
                小程序后台登录
          </div>
          <div class="formData">
                <el-form :model="ruleForm" status-icon  ref="ruleForm"  class="demo-ruleForm">
            <el-form-item label="账户" prop="pass">
              <el-input type="text" v-model="ruleForm.username" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm.password" @keyup.enter.native="LoginAdmin" ></el-input>
            </el-form-item>
            
            <el-form-item>
            <el-button type="primary" @click="LoginAdmin">登录</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
            </el-form>
          </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
          ruleForm: {
                username: "",
                password: ""
          }
    };
  },
  mounted() {
    this.init();
    window.onresize = this.getHeight()
  },
  methods: {
    init() {
      (function() {
        this.Bubble = function() {
          class Bubble {
            constructor(x, y, r, createdAt) {
              this.x = x;
              this.y = y;
              this.r = r;
              this.createdAt = createdAt;
            }

            velocity() {
              return (this.r / 20) * Bubble.MAX_V;
            }

            grow(now) {
              if (!this.rising && this.r <= Bubble.MAX_R) {
                return (this.r += Bubble.GROWTH_RATE * (now - this.createdAt));
              }
            }

            move(now) {
              if (this.rising) {
                return (this.y -=
                  (now - this.startedRisingAt) * this.velocity());
              }
            }

            rise() {
              if (!this.rising && this.r > 2) {
                this.rising = Math.random() < 0.15 * (this.r / Bubble.MAX_R);
                if (this.rising) {
                  return (this.startedRisingAt = new Date().getTime());
                }
              }
            }
          }

          Bubble.MAX_R = 20;

          Bubble.MAX_V = 0.02;

          Bubble.GROWTH_RATE = 0.00005;

          return Bubble;
        }.call(this);

        this.RisingBubbles = function() {
          var rand, randInt;

          class RisingBubbles {
            constructor(id, maxBubbles) {
              var elem, i, j, ref;
              this.maxBubbles = maxBubbles;
              this.canvas = document.getElementById(id);
              elem = $("#" + id);
              elem.css("background-color", "#3d8835");
              elem.click(() => {
                var b, j, len, ref, results, ts;
                ts = new Date().getTime();
                ref = this.bubbles;
                results = [];
                for (j = 0, len = ref.length; j < len; j++) {
                  b = ref[j];
                  if (!b.rising) {
                    b.rising = true;
                    results.push((b.startedRisingAt = ts));
                  } else {
                    results.push(void 0);
                  }
                }
                return results;
              });
              this.canvas.width = this.canvas.clientWidth;
              this.canvas.height = this.canvas.clientHeight;
              this.ctx = this.canvas.getContext("2d");
              this.ctx.fillStyle = "#FFFFFF";
              this.bubbles = [];
              this.lastFrame = new Date().getTime();
              for (
                i = j = 1, ref = randInt(0, this.maxBubbles);
                1 <= ref ? j <= ref : j >= ref;
                i = 1 <= ref ? ++j : --j
              ) {
                this.bubbles.push(
                  new Bubble(
                    randInt(0, this.canvas.width),
                    randInt(0, this.canvas.height),
                    rand(0, Bubble.MAX_R),
                    new Date().getTime()
                  )
                );
              }
            }

            draw() {
              return this.run(new Date().getTime());
            }

            run(now) {
              var bubble, j, len, ref;
              this.update(now);
              this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
              ref = this.bubbles;
              for (j = 0, len = ref.length; j < len; j++) {
                bubble = ref[j];
                this.ctx.moveTo(bubble.x, bubble.y);
                this.ctx.beginPath();
                this.ctx.arc(bubble.x, bubble.y, bubble.r, 0, 2 * Math.PI);
                this.ctx.fill();
              }
              return requestAnimationFrame(() => {
                return this.run(new Date().getTime());
              });
            }

            update(now) {
              var b, i, j, k, len, ref, ref1, results;
              ref = this.bubbles;
              for (j = 0, len = ref.length; j < len; j++) {
                b = ref[j];
                b.grow(now);
                b.rise();
                b.move(now);
              }
              this.bubbles = function() {
                var k, len1, ref1, results;
                ref1 = this.bubbles;
                results = [];
                for (k = 0, len1 = ref1.length; k < len1; k++) {
                  b = ref1[k];
                  if (b.y + b.r >= 0) {
                    results.push(b);
                  }
                }
                return results;
              }.call(this);
              if (this.maxBubbles - this.bubbles.length > 0) {
                results = [];
                for (
                  i = k = 1,
                    ref1 = randInt(0, this.maxBubbles - this.bubbles.length);
                  1 <= ref1 ? k <= ref1 : k >= ref1;
                  i = 1 <= ref1 ? ++k : --k
                ) {
                  results.push(
                    this.bubbles.push(
                      new Bubble(
                        randInt(0, this.canvas.width),
                        randInt(0, this.canvas.height),
                        1,
                        new Date().getTime()
                      )
                    )
                  );
                }
                return results;
              }
            }
          }

          randInt = function(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
          };

          rand = function(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
          };

          return RisingBubbles;
        }.call(this);

        $(function() {
          var fizz;
          fizz = new RisingBubbles("fizz", 500);
          return fizz.draw();
        });
      }.call(window));
    },
    getHeight() {
          let height = document.documentElement.clientHeight
          let doms = document.querySelector("#fizz")
          doms.style.height = height + "px"
    },

//     登录
      async LoginAdmin() {
            let data = this.ruleForm
            if (!data.username) {
                  this.$message.error("请输入账户")
                  return false
            } else if (!data.password) {
                  this.$message.error("请输入密码")
                  return false
            } else {
                  let res = await this.$axios.post("/admin/login/login", this.ruleForm)
                  let code = res.data.code
                  if (code == 20009) {
                        localStorage.setItem("miniToken", res.data.data.token)
                        this.$store.dispatch("emitToken", localStorage.miniToken)
                        this.$message.success("登录成功")
                        this.$router.push("/")
                        
                  } else {
                        this.$message.error("用户不存在")
                  }
                  
            }
      }
  }
};
</script>

<style lang="scss" scoped>
#login {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000;
  position: relative;
  left: 0;
  top: 0;
}
.el-form-item {
      width: 400px;
}
.el-input {
      width: 300px;
}
.userInfo {
      
      width: 600px;
      height: 300px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -300px;
      margin-top: -150px;
      border-radius: 20px;
      padding: 30px;
      background-color: #fff;
      .title {
            color: #ff9702;
            font-size: 40px;
            margin-bottom: 30px;
      }
      .formData{
            text-align: center;
            width: 400px;
            margin: 0 auto;
      }
}
#fizz {
  width: 100%;
  height: 100%;
}
// .title {
//   position: absolute;
//   left: 0;
//   right: 0;
//   top: 30%;
//   text-align: center;
//   color: white;
//   opacity: 0.7;
//   font-family: "Knewave", cursive;
//   font-size: 84px;
// }
</style>